<template>
  <el-cascader
    ref="areaCascader"
    v-model="areaCodeModel"
    style="width:100%"
    clearable
    filterable
    :options="areaData"
    :props="areaProps"
    :disabled="disabled"
    @change="handleAddress"
  />
</template>

<script>
// 全国地区组件
import { CommonArea } from '@/api/common';
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    areaCode: {
      type: [String, Array],
      default: () => {
        return ['33000000', '33020000'];
      }
    }
  },
  data() {
    return {
      areaData: [],
      areaProps: {
        lazy: true,
        value: 'code',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: 'true',
        lazyLoad(node, resolve) { // 全国地区
          const { level } = node;
          if (level === 1) {
            CommonArea({
              code: node.data.code,
              type: '2'
            }).then(({ value }) => {
              value[0].children.forEach(el => {
                el.children.forEach(i => {
                  i.children.forEach(o => (o.leaf = true));
                });
              });
              resolve(value[0].children || []);
            });
          } else if (level === 4) {
            resolve([]);
          } else {
            if (node.data) {
              resolve(node.data.children || []);
            } else {
              resolve([]);
            }
          }
        }
      }
    };
  },
  computed: {
    areaCodeModel: {
      get() {
        return this.areaCode;
      },
      set(v) {
        this.$emit('update:areaCode', v);
      }
    }
  },
  created() {
    this.getProvinceArea();
  },
  methods: {
    handleReset(data = []) {
      this.areaCodeModel = data;
    },
    toEchoAddress(areaCode) { // 当详情接口成功后 调用此方法进行回显
      if (this.areaData && this.areaData.length) {
        areaCode && this.getCityArea(areaCode); // 回显
      } else {
        this.getProvinceArea(areaCode);
      }
    },
    handleAddress(value) {
      this.$refs.areaCascader.dropDownVisible = false;
      const nodes = this.$refs.areaCascader.getCheckedNodes()[0] || {};
      const label = nodes.label;
      const pathLabels = nodes?.pathLabels;
      this.$emit('handleArea', { value, label, pathLabels });
    },
    getProvinceArea(areaCode) {
      const areaProvince = window.areaProvince;
      const echoFn = () => {
        areaCode && this.getCityArea(areaCode); // 回显
      };
      if (areaProvince) { // 为了减少请求 把省的数据挂载到window上了
        this.areaData = areaProvince;
        echoFn();
      } else {
        CommonArea({
          code: '00000000', // 传00000000获取省
          type: '2' // 传2获取全国数据 传1默认返回宁波市
        }).then(({ value, success }) => {
          if (success) {
            this.areaData = value;
            window.areaProvince = value;
            echoFn();
          }
        });
      }
    },
    getCityArea(areaCode) {
      const headCode = areaCode.slice(0, 2);
      const proIndex = this.areaData.findIndex(el => (el.code).slice(0, 2) === headCode);
      if (proIndex >= 0) {
        const isZjs = !!(headCode === '33');// 是否为浙江省,因为浙江省用的多，把它挂载到window上了
        const zjAreaData = window.zjAreaData;
        if (isZjs && zjAreaData) {
          const zjData = this.areaData[proIndex].children;
          if (!zjData || (zjData && !zjData.length)) {
            this.areaData[proIndex].children = zjAreaData;
          }
        } else {
          CommonArea({
            code: this.areaData[proIndex].code,
            type: '2'
          }).then(({ value }) => {
            const data = value[0].children;
            data.forEach(el => {
              el.children.forEach(i => {
                i.children.forEach(o => (o.leaf = true));
              });
            });
            this.areaData[proIndex].children = data;
            if (isZjs) window.zjAreaData = data;
            this.$set(this, 'areaData', value);
          });
        }
      }
    }
  }
};
</script>

<style lang="scss">
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}

.el-cascader-panel .el-radio__input {
  visibility: hidden;
}

.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
